<template>
    <div id='cate'>
    <!-- 头部 -->
        <div class="header">
            <div class="header-box">
            <HeaderNav/>
            </div>
        </div>
        <!-- 某个地址的美食 -->
        <div class="details">
            <div class="details-box">
            <div class="breadcrumbs">
                <span class='crumbs'>南阳小吃快餐</span>
            </div>
            <div class="clear">
                <div class="d-left">
                    <div class="l-name">
                        <span class='snackName'>{{info.shopName}}</span>
                    </div>
                    <div class="l-score">
                        <p>
                            <el-rate
                            :value="info.shopMark"
                            disabled
                            show-score
                            text-color="#ff9900"
                            >
                            </el-rate>
                        </p>
                    </div>
                    <div class="l-address">
                        <p>地址：{{info.shopLocation}}</p>
                        <p>电话：{{info.shopPhone}}</p>
                        <p>营业时间：周一至周日 11:00-21:30</p>
                    </div>
                </div>
                <div class="d-right">
                    <div class='r-big'>
                        <img :src="info.shopCover" alt="餐厅图片">
                    </div>
                </div>
            </div>
            </div>
        </div>
        <Recommend/>
        <MainComment></MainComment>
        <CommentFood></CommentFood>
         <div class="footer">
            <div class="footer-box">
            <Footer/>
            </div>
        </div>  
    </div>
</template>
<script>
import HeaderNav from '../components/ld/header'
import Footer from '../components/ld/footer.vue'
import Recommend from '../components/ld/C-commend.vue'
import MainComment from '../components/ld/main-comment.vue'
import CommentFood from '../components/ld/C-commentFood.vue'

// import cookie from '../cookie/index'
import {showHotel} from '../../api/commonReq/front/cate/data'
export default {
    name:'Cate',
    components:{Recommend,HeaderNav,MainComment,CommentFood,Footer},
    data() {
        return {
            info:null,           
        }
    },
    // props:['id','title'],
    mounted(){ 
    //    this.showHotel()
        showHotel().then(data=>{
          this.info = data.data.data;         
        })
        .catch(err => {
            console.log(err);
        })
    },  
    methods:{
        // 遍历数据
       
        // showHotel(){
        //     this.$http({
        //         url:'/shops/shopper/store/show/shop',
        //         method:'get', 
        //         headers:{
        //             'Authorization':cookie.getToken()
        //         },               
        //         params:{
        //             shopId:this.$route.params.id
        //         }
        //     }).then(data => { 
        //         this.info = data.data.data;   
                  
        //     }).catch(err => {
        //         console.log(err);
        //     })
        // },
    },
}
</script>
<style lang="less" scoped> 

.header{
  width: 100%;
  background-color: rgb(248,248,248);
  .header-box{
      width: 1200px;
      margin: 0 auto;
  }
}
.footer{
  margin-top: 80px;
  width: 100%;
  background-color: rgb(26,26,26);
  .footer-box{
      width: 1200px;
      margin: 0 auto;
  }
}
    // 某个地址的美食
    .details{
        width: 100%;
        margin: auto;
        background: #F8F8F8;
        .breadcrumbs{
            font-size: 12px;
            color: #222;
            line-height: 17px;
            padding: 19px;
            cursor: pointer;
            text-align: left;
        }
        .clear{
            font-size: 12px;
            color: #666;
            background-color: #fff;
            border-radius: 10px;
            padding: 20px 20px 33px 20px;
            border: 1px solid #e5e5e5;
            // box-shadow: 0 5px 14px rgb(0 0 0 / 10%);
            display: flex;
            margin: 5px 36px;
            .d-left{
                width: 65%;
                padding-right: 20px;
                .l-name{
                    font-size: 26px;
                    line-height: 37px; 
                    text-align: left;  
                }
                .l-score{
                    display: inline-block;
                    margin-left: 6px;
                    font-size: 14px;
                    height: 14px;
                    margin: 6px 0 17px 0;
                     text-align: left;  
                }
                .l-address{
                    border-top: 1px solid #e5e5e5;
                    border-bottom: 1px solid #e5e5e5;
                    padding: 16px 0 11px 0;
                     text-align: left;  
                    p{
                        font-size: 14px;
                        line-height: 20px;
                        margin-bottom: 10px;
                    }
                }
            }
            .d-right{
                cursor: pointer;
                width: 35%;
                overflow: hidden;
                .r-big{
                    height: 214px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
           
        }
    }
</style>